<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- Swiper7 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js.map"> </script>
    <link rel="stylesheet" href="./gjdwz.css">
    <!-- ES 模块 -->
    <script type="module">
        import Swiper from 'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'
   </script>
    <script src="./jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="./sf.css">
</head>

<body>
    <div class="box">
        <div class="nav">
            <div class="log1">
                <img src="./sfimg/下载.png" alt="">
            </div>
            <div class="list1">
                <ul class="navlist">
                    <li class="bo2" style="position:relative;">首页</li>
                    <li>物流服务</li>
                    <li>智慧科技</li>
                    <li>服务支持</li>
                    <li>可持续发展</li>
                    <li>投资者关系</li>
                    <li class="bo1" style="position:relative;">关于我们


                    </li>
                </ul>
            </div>
            <div class="right">快速登录/注册</div>
        </div>
        <div>
            <div class="boc1" style="position: absolute;">
                <li>关于顺丰</li>
                <li>人才招聘</li>
                <li>服务公告</li>
                <li>系统更新</li>
                <li>敬请期待</li>
            </div>
            <div class="boc2" style="position: absolute;">
                <li>关于顺丰</li>
                <li>人才招聘</li>
                <li>服务公告</li>
                <li>系统更新</li>
                <li>敬请期待</li>
            </div>
        </div>
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./imgs/20200315111327194358156.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./imgs/a2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./imgs/a3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./imgs/a4.jpg" alt=""></div>
                
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>


    </div>

</body>
<script>
    $(function () {
        $(".bo1").mouseover(function () {
            $(".boc1").css("display", "block")
        })
        $(".bo1").mouseout(function () {
            $(".boc1").css("display", "none")
        })
        $(".bo2").mouseover(function () {
            $(".boc2").css("display", "block")
        })
        $(".bo2").mouseout(function () {
            $(".boc2").css("display", "none")
        })
        var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    })
</script>

</html>